package com.midele.goodstuff.ui.releasegoods.screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.midele.goodstuff.R
import com.midele.goodstuff.ui.component.CommBackArrow
import com.midele.goodstuff.viewmodel.ReleaseViewModel

/**
 * 选择物品类目界面
 */
@Composable
internal fun ItemCategoryRoute(
    modifier: Modifier = Modifier,
    viewModel: ReleaseViewModel = hiltViewModel(),
    navController: NavHostController,
) {

    ItemCategoryScreen(viewModel,navController)
}
@Composable
fun ItemCategoryScreen(
    viewModel: ReleaseViewModel,
    navController: NavHostController,
) {
    var selectedCategory by remember { mutableStateOf("藏传") }
    
    // 类目数据
    val categories = listOf(
        "古珠", "藏传", "文玩", "珠宝", "玉石", "杂项"
    )
    
    // 产品数据（模拟数据）
    val products = remember { 
        List(12) { "至纯天珠" }
    }
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.c_121212))
    ) {
            // 标题栏

            CommBackArrow(
                title = stringResource(id = R.string.str_release_goods_title),
                onClick = { navController.popBackStack() },
            )
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(end = 16.dp)
        ) {
            // 左侧类目列表
            LazyColumn(
                modifier = Modifier
                    .width(100.dp)
                    .fillMaxHeight()
                    .padding(end = 16.dp, top = 12.dp)
                    .background(colorResource(R.color.black),RoundedCornerShape(0.dp,16.dp,0.dp,0.dp))

            ) {
                items(categories) { category ->
                    CategoryItem(
                        category = category,
                        isSelected = category == selectedCategory,
                        onClick = {
                            selectedCategory = category
//                            onCategorySelected(category)
                        }
                    )
                }
            }

            // 右侧产品网格
            LazyVerticalGrid(
                columns = GridCells.Fixed(2),
                modifier = Modifier.weight(2f)
                    .padding(0.dp,12.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                items(products) { product ->
                    ProductItem(
                        productName = product,
                        onClick = { }
                    )
                }
            }
        }
    }
}

@Composable
private fun CategoryItem(
    category: String,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Column(
        modifier = Modifier
            .width(100.dp)
            .clickable { onClick() }
            .padding(vertical = 12.dp)
    ) {
        Text(
            text = category,
            color = if (isSelected) colorResource(R.color.c_fce9c1) else colorResource(R.color.c_dcdee0),
            fontSize = if (isSelected) 16.sp else 14.sp,
            fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        
        if (isSelected) {
            Spacer(modifier = Modifier.height(8.dp))
            Box(
                modifier = Modifier
                    .width(16.dp)
                    .height(2.dp)
                    .background(
                        colorResource(R.color.c_fce9c1),
                        RoundedCornerShape(1.dp)
                    )
                    .align(Alignment.CenterHorizontally)
            )
        }
    }
}

@Composable
private fun ProductItem(
    productName: String,
    onClick: () -> Unit
) {
    Column(
        modifier = Modifier
            .clickable { onClick() }
            .clip(RoundedCornerShape(18.dp))
            .background(colorResource(R.color.c_211c18))
            .padding(8.dp)
    ) {

        Image(
            painter = painterResource(R.drawable.ic_release_item_library),
            contentDescription = null,
            modifier = Modifier.fillMaxWidth()
                .aspectRatio(ratio = 1.0f)
        )

        Spacer(modifier = Modifier.height(8.dp))
        
        Text(
            text = productName,
            color = Color.White,
            fontSize = 14.sp,
            fontWeight = FontWeight.Medium,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}